<template>
    <div class="discount-container" @click="onClick">
        <div class="discount-top-container">
            <div class="discount-name">{{coupon.title}}</div>
            <div class="discount-value"><span class="discount-value-number">{{discountValue}}</span></div>
        </div>
        <div class="discount-bottom-container small-text clearfix">
            <div class="discount-info">{{time}}</div>
            <div class="discount-rule" @click.stop="showRulesPopup">
                使用规则
                <span class="icon">&#xe60d;</span>
            </div>
        </div>
        <div class="duihao primary-color" v-if="showSelected">
            <span class="icon">&#xe69e;</span>
        </div>
    </div>
</template>

<script>
import {
    dateParse,
    dateFormat,
    wait,
    currency,
} from '@/lib/utils';

export default {
    name: 'CouponCard',
    props: {
        coupon: {
            required: true,
            type: Object,
        },
        isSelect: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            showSelected: false,
        };
    },
    computed: {
        /** 折扣金额 */
        discountValue() {
            const number = currency(Number(this.coupon.money));
            return number;
        },
        /** 有效期 */
        time() {
            return `有效期: ${dateFormat(dateParse(this.coupon.expiration_date), 'Y.M.D')}前`;
        },
    },
    methods: {
        async onClick() {
            if (this.isSelect) {
                this.showSelected = true;
                await wait(300);
            }
            this.$emit('click');
        },
        /**
         * 显示弹窗
         */
        showRulesPopup() {
            this.coupon.time = this.time;
            this.$emit('showPop', this.coupon);
        },
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.discount-container {
    position: relative;
    min-height: 260rpx;
    border-radius: 10px;
    margin-bottom: 30rpx;
    .discount-top-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 180rpx;
        width: 100%;
        background-color: white;
    }
    .discount-bottom-container {
        width: 100%;
        padding: 10px 0;
        background-color: white;
        border-top: 1px dashed #ccc;
    }
    .discount-name {
        width: 70%;
        padding: 10px 0;
        margin: 0px;
        margin-left: 30rpx;
        font-size: 40rpx;
        text-align: left;
        vertical-align: middle;
    }
    .discount-value {
        flex: 1;
        margin: 0;
        margin-right: 30rpx;
        display: inline-block;
        font-size: 30rpx;
        text-align: center;
        vertical-align: middle;
        font-weight: 400;
        color: black;
    }
    .discount-value span {
        font-size: 80rpx;
        font-weight: 600;
        color: #fe5f4d;
    }
    .discount-info {
        float: left;
        width: auto;
        margin: 0px;
        margin-left: 30rpx;
        vertical-align: middle;
    }
    .discount-rule {
        float: right;
        margin: 0px;
        margin-right: 30rpx;
        text-align: right;
        vertical-align: middle;
    }
    &::before {
        position: absolute;
        content: '';
        width: 40rpx;
        height: 40rpx;
        left: -10px;
        bottom: 60rpx;
        border-radius: 50%;
        background: #f2f2f2;
    }
    &::after {
        position: absolute;
        content: '';
        width: 40rpx;
        height: 40rpx;
        right: -10px;
        bottom: 60rpx;
        border-radius: 50%;
        background: #f2f2f2;
    }
    .duihao {
        position: absolute;
        top: 0;
        right: 10rpx;
        // color: #044A8D;
        font-size: 36rpx;
    }
}

</style>
